<!DOCTYPE html>
<html lang="en" xmlns="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>支付中心 · Top - 英皇乐理 在线模考平台</title>
    <link rel="shortcut icon" th:href="@{/images/logo.png}">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/all.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/pay.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/commons.js}"></script>
    <script type="text/javascript" th:src="@{/js/util.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.qrcode.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/pay.js}"></script>
</head>
<body>
<div class="main-div">
    <div class="main-box">
        <div th:replace="~{commons::headerbar(active='productList')}"></div>
        <div class="pay-box">
            <div class="available-area">
                <div class="cart-steps">
                    <span class="active">1.我的购物车</span>
                    <span class="active">2.填写订单信息</span>
                    <span class="active">3.成功提交订单</span>
                </div>
            </div>
            <div class="box">
                <div style="display: flex">
                    <div class="img">
                        <img th:src="@{/images/order.png}"/>
                    </div>
                    <div class="order-info">
                        订单提交成功，请您尽快付款！订单号：[[${outTradeNo}]]
                        <span style="display: none" th:text="${outTradeNo}" id="outTradeNo"></span>
                        <span style="display: none" th:text="${productId}" id="paperId"></span>
                        <p>订单为您保留 <span class="minute_show"></span><span class="second_show"></span>，请抓紧时间付款。</p>
                    </div>
                </div>
                <div class="pay-money">
                    实付金额：￥ <span style="color: red" th:text="${actualPrice}" id="actualMoney">[[${actualPrice}]]</span>
                </div>
            </div>
        </div>
        <div class="pay-type">
            <div class="box">
                <div class="wechat-pay">
                    <div class="wechat-icon"><img th:src="@{/images/login-wx.png}"/></div>
                    <div class="wechat-pay-mess">
                        <div class="title">微信支付</div>
                        <div class="info">请使用微信APP扫码支付。</div>
                    </div>
                </div>
                <div class="qr-code"><!--动态生成支付二维码-->
                    <div class="q-box">
                        <div id="qr-code"></div>
                        <p>打开手机端微信<br/>扫一扫继续付款</p>
                    </div>
                    <div style="color: red;font-weight: 700;text-align: center;">【购买须知】支付后可同步在微信小程序中查看订单。</div>
                </div>
            </div>
        </div>
        <div class="pay-paper-list">
            <div class="paper-item">
                <div class="title">[[${productEntity.productName}]]</div>
                <div class="title">￥[[${productEntity.actualPrice}]]</div>
            </div>
        </div>
    </div>
    <div th:replace="~{commons::footerbar}"></div>
</div>
</body>
</html>